<template>
	<view>
		<u-navbar back-text="返回" :backTextStyle="backTextColor" backIconColor="#fff" :background="background">
			<view style="text-align: center; width: 100%;">
				<text class="nav-title">{{itemTitle}}</text>
			</view>
			<view class="navbar-right" slot="right">
				<view class="right-item">
					<u-icon name="chat" size="38"></u-icon>
					<u-badge count="18" size="mini" :offset="[-15, -15]"></u-badge>
				</view>
				<view class="right-item">
					<u-icon name="setting" size="38" @click="open"></u-icon>
				</view>
			</view>
		</u-navbar>
		<view class="home">
			<!-- <u-search placeholder="请输入关键词搜索" v-model="keyword" :actionStyle="actionStyle"></u-search> -->
			<view v-if="show_peng" v-for="(item,index) in deviceList">
				<view class="u-m-t-20">
					<view class="u-flex u-row-between">
						<view class="title">{{item.name}}</view>
						<view><u-icon name="trash" color="#eb5e14" size="32" @click="delsearch"></u-icon></view>
					</view>
				</view>
				<view class="u-p-t-20">
					<u-tag type="success" shape="circle" text="展开" class="tag" @click="pengHDL(item,'open')"></u-tag>
					<u-tag type="error" shape="circle" text="停止" class="tag" @click="pengHDL(item,'stop')"></u-tag>
					<u-tag type="warning" shape="circle" text="收棚" class="tag" @click="pengHDL(item,'close')" ></u-tag>
				</view>
			</view>
			<view v-if="show_peng">
				<view class="u-m-t-30">
					<view class="u-flex u-row-between">
						<view class="title">异常情况</view>
						<view><u-icon name="eye" color="#eb5e14" size="32"></u-icon></view>
					</view>
				</view>
				<view class="u-p-t-20">
					<u-tag type="warning" shape="circle" text="重置" class="tag"></u-tag>
				</view>
			</view>
			<view v-if="show_feng">
				<u-time-line>
				    <u-time-line-item nodeTop="2">
				        <!-- 此处自定义了左边内容，用一个图标替代 -->
				        <template v-slot:node>
				            <view class="u-node" style="background: #19be6b;">
				                <!-- 此处为uView的icon组件 -->
				                <u-icon name="pushpin-fill" color="#fff" :size="24"></u-icon>
				            </view>
				        </template>
				        <template v-slot:content>
				            <view>
				                <view class="u-order-title">待取件</view>
				                <view class="u-order-desc">[自提柜]您的快件已放在楼下侧门，直走前方53.6米，左拐约10步，再右拐直走，见一红灯笼停下，叩门三下，喊“芝麻开门”即可。</view>
				                <view class="u-order-time">2019-05-08 12:12</view>
				            </view>
				        </template>
				    </u-time-line-item>
				    <u-time-line-item>
				        <!-- 此处没有自定义左边的内容，会默认显示一个点 -->
				        <template v-slot:content>
				            <view>
				                <view class="u-order-desc">【深圳市】日照香炉生紫烟，遥看瀑布挂前川，飞流直下三千尺，疑是银河落九天。</view>
				                <view class="u-order-time">2019-12-06 22:30</view>
				            </view>
				        </template>
				    </u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			deviceList: {
				type: Array,
				default: function() {
					return [];
				}
			},
		},
		data() {
			return {
				background: this.TopColor,
				keyword:'',
				backTextColor: {
					'color': '#ffffff'
				},
				actionStyle:{
					'color':'#FC0099',
				},
				itemTitle:"",
				id:"",
				deviceType:"",
			}
		},
		onLoad(e) {
			this.itemTitle = e.title;
			this.id = e.id;
			this.deviceType = e.type;
			
			if(this.deviceType == "peng"){
				this.show_peng = true;
				this.show_feng = false;
			}
			if(this.deviceType == "feng"){
				this.show_peng = false;
				this.show_feng = true;
			}
			this.deviceList = JSON.parse(e.deviceList);
		},
		methods:{
			delsearch(){
				this.$common.successToShow('清除成功');
			},
			open(){
				
			},
			pengHDL(item, act){
				// console.log(name,act)
				let btn_no = "00";
				if(item.name == "小棚" && act == 'open'){
					btn_no = "01";
				}else if(item.name == "小棚" && act == 'stop'){
					btn_no = "02";
				}else if(item.name == "小棚" && act == 'close'){
					btn_no = "03";
				}else if(item.name == "大棚" && act == 'open'){
					btn_no = "06";
				}else if(item.name == "大棚" && act == 'stop'){
					btn_no = "05"
				}else if(item.name == "大棚" && act == 'close'){
					btn_no = "04"
				}else{
					btn_no = "00"
				}
				this.$api.post("/kim/relayio/ctl.action",{btn_no: btn_no}).then(res => {
					this.$common.successToShow('操作成功')
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title{
		font-size: 32rpx;
		font-weight: bold;
		color: #FC0099;
	}
	.tag{
		margin-right: 20rpx;
		margin-bottom: 20rpx;
	}
	.nav-title{
		font-size: 32rpx;
		font-weight: bold;
		color: #ffffff;
		display: flex;
		justify-content: center;
	}
</style>
